<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>首页</title>
  <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/framework/reset.css">
  <link rel="stylesheet" href="../static/css/index.css">
  <link rel="stylesheet" href="../static/css/footer.css">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      padding-bottom: 60px;
      /* 确保底部空间留给固定在底部的 footer */
    }

    .footer li {
      cursor: pointer;
      /* 让鼠标指针显示为手型，表示可以点击 */
      transition: transform 0.2s ease;
      /* 添加变换动画，这里使用简单的缩放效果 */
    }

    .footer li:hover {
      transform: scale(1.1);
      /* 鼠标悬停时放大一点 */
    }

    .menu {
      cursor: pointer;
    }
  </style>
</head>

<body>
<!-- 整个页面最外层div -->
<div class="wrapper">
  <!-- 抬头区 -->
  <header>
    <i class="fa fa-gg-circle"></i>&nbsp;银行首页
  </header>
  <!-- 功能菜单区 -->
  <ul class="menu">
    <li onclick="location.href='/money'">
      <img src="../static/img/收支.png" width="45px" height="45px" class="">
      <p>收支</p>
    </li>

    <li onclick="location.href='/card'">
      <img src="../static/img/信用卡.png" width="45px" height="45px" class="card">
      <p>银行卡</p>
    </li>

    <li onclick="location.href='/recipientList'">
      <img src="../static/img/转账.png" alt="转账" width="45px" height="45px" class="">
      <p>转账</p>
    </li>
    <li onclick="location.href='/pay'">
      <img src="../static/img/生活缴费.png" width="45px" height="45px" class="life">
      <p>生活缴费</p>
    </li>
  </ul>
  <!-- 智能区 -->
  <div class="special">
    <div class="text">
      <h3>金融小秘书&nbsp;&nbsp;&nbsp;智能提醒</h3>
      <div class="subText">
          <span>
            <i class="fa fa-bell" style="color: #FF0000;"></i>缴费提醒
          </span>
        <span>
            <i class="fa fa-credit-card" style="color: #0097FF;"></i>还款提醒
          </span>
      </div>
    </div>
    <div class="go">
      GO
    </div>
  </div>
  <!-- 广告区 -->
  <div class="banner">

  </div>
  <!-- 底部功能区 -->
  <ul class="footer" style="list-style: none;  justify-content: space-around; padding: 0;">

    <li style="text-align: center; " onclick="location.href='/index'">
        <img src="../static/img/首页.png" alt="首页" width="30px" height="30px">
    </li>

    <li style="text-align: center;" onclick="location.href='/finance'">
      <img src="../static/img/金融.png" alt="金融助手" width="30px" height="30px">
    </li>

    <li style="text-align: center; " onclick="location.href='/myInformation'">
      <img src="../static/img/账户1.png" alt="账户" width="30px" height="30px">
    </li>

  </ul>


</div>
<script>

</script>
</body>

</html>